<template>
  <div class="lingpai">
    <el-form :model="form" :rules="rules" class="demo-ruleForm">
      <el-form-item>
        <h1>令牌登录</h1>
      </el-form-item>
      <el-form-item prop="account">
        <el-input
          type="password"
          v-model="form.account"
          placeholder="请输入账号或手机号"
        ></el-input>
      </el-form-item>
      <el-form-item prop="yanzheng">
        <el-input
          type="password"
          v-model="form.yanzheng"
          placeholder="请输入正确的验证码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">令牌登陆</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    const checkaccount = (rule, value, callback) => {
      if (/^\d{10}$/g.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的账号或手机号"));
      }
    };
    const checkyanzheng = (rule, value, callback) => {
      if (/^\d{6}$/g.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的验证码"));
      }
    };
    return {
      form: {
        account: "",
        yanzheng: ""
      },
      rules: {
        account: [{ validator: checkaccount, trigger: "blur" }],
        yanzheng: [{ validator: checkyanzheng, trigger: "blur" }]
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.lingpai {
  width: 100%;
  height: 100%;
  background-color: grey;
  display: flex;
  justify-content: center;
  align-items: center;
  .demo-ruleForm {
    width: 300px;
    height: 300px;
    text-align: center;
    .el-button {
      width: 100%;
    }
  }
}
</style>
